/* buttons module */
.button{
  display: inline-block;

  box-sizing: border-box;
  min-width: 30px;
  min-height: 30px;
  line-height: 28px;
  padding: 0;

  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;

  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;

  color: #fff !important;
  border: 1px solid transparent;

  @include single-transition(background, .2s);

  //hover effects
  &:hover,
  &:focus,
  &:active{
    color: #fff;
    @include single-transition(background, .2s);
    outline: 0;
  }
  &:active{
    @include tranlate2d(0, 1px);
  }
  //disabled
  &[disabled]{
    cursor: not-allowed;
    pointer-events: none;
  }

}

@each $key, $value in $theme{
  @if map-has_key($config, $key){
    .#{$value}{
      .button{
        border-radius: setStyle($config, $key, btn-square-border-radius);
        //button with words
        &.large {
          border-radius: setStyle($config, $key, border-radius-base);
          padding: 0 setStyle($config, $key, btn-padding);
        }
        //button with different background
        &.primary{
          border-color: darken(setStyle($config, $key, brand-primary), 7%);
          &:hover{
            background-color: darken(setStyle($config, $key, brand-primary), 7%);
          }
        }

        &.secondary{
          border-color: darken(setStyle($config, $key, brand-info), 7%);
          &:hover{
            background-color: darken(setStyle($config, $key, brand-info), 7%);
          }
        }

        &.success{
          border-color: darken(setStyle($config, $key, brand-success), 7%);
          &:hover{
            background-color: darken(setStyle($config, $key, brand-success), 7%);
          }
        }

        &.warning{
          border-color: darken(setStyle($config, $key, brand-warning), 7%);
          &:hover{
            background-color: darken(setStyle($config, $key, brand-warning), 7%);
          }
        }

        &.alert{
          border-color: darken(setStyle($config, $key, brand-danger), 7%);
          &:hover{
            background-color: darken(setStyle($config, $key, brand-danger), 7%);
          }
        }
      }
    }
  }
  @else {
    @warn "The key isn't defined in the map setting"
  }
}


//the height of title bar is 34px so we have to move it 2px down
.title .bar-close{
    margin-top: 2px;
}


